<!-- 成片管理 ——表格（原成片管理备份） -->
<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <el-card
      shadow="never"
      header="成片管理"
      body-style="padding: 22px 22px 0 22px;"
    >
      <el-form
        :hide-required-asterisk="true"
        ref="form"
        :model="form"
        label-width="80px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
        <el-row :gutter="15" class="m-bottom10">
          <el-col style="height: 60px;" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="剪辑名称:">
              <el-input
                v-model="form.projectName"
                placeholder="请输入剪辑名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px;" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="任务状态:">
              <el-select
                v-model="form.state"
                placeholder="请选择任务状态"
                class="ele-block"
                clearable
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px;" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="发布状态:">
              <el-select
                v-model="form.isPublish"
                placeholder="请选择发布状态"
                class="ele-block"
                clearable
              >
                <el-option label="未发布" value="0" />
                <el-option label="已发布" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="发布时间:">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
          <el-col  :xs="12" :sm="12" :lg="6" :xl="6">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <ele-pro-table
        ref="table"
        size="mini"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        :need-page="true"
        :hideOnSinglePage="false"
      >
        <!--头部按钮-->
        <template v-slot:toolbar>
          <div class="btn-class">
            <el-button type="danger" size="small" @click="delMoreGroup">
              删除
            </el-button>
          </div>
        </template>
        <!--剪辑模式-->
        <template v-slot:type="{ row }">
          <div>{{ row.type==3?'图文剪辑':row.type==2?'口播剪辑':'AI剪辑' }}</div>
        </template>
        <!--是否发布-->
        <template v-slot:isPublish="{ row }">
          <div>{{ row.isPublish==1?'已发布':'未发布' }}</div>
        </template>
        <!--任务状态-->
        <template v-slot:state="{ row }">
          <div>{{ row.state=='create'?'已创建':row.state=='Success'?'已完成':row.state=='Failed'?'剪辑失败':'执行中' }}</div>
        </template>
        <!--发布时间-->
        <template v-slot:publishTime="{ row }">
          <div>{{ row.publishTime?row.publishTime:'暂无发布' }}</div>
        </template>
        <!--操作-->
        <template v-slot:action="{ row }">
          <div class="flex-around">
            <!--<el-link type="primary" :href="row.outUrl" :underline="false">预览</el-link>-->
            <el-link type="primary" @click="open_url(row.outUrl)" :underline="false" :disabled="row.state=='Success' ? false : true">预览</el-link>
            <el-link type="danger" @click="delSingle(row)" :underline="false">删除</el-link>
            <el-link type="success" @click="copy_url(row.outUrl)">复制链接</el-link>
          </div>
        </template>
      </ele-pro-table>



      <!--<el-table
        :data="list" stripe
        style="width: 100%">
        <el-table-column
          label="剪辑工程ID"
          prop="sProjectId">
        </el-table-column>
        <el-table-column
          label="是否发布">
          <template v-slot="{ row }">
            <div>{{ row.isPublish==1?'已发布':'未发布' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="任务状态">
          <template v-slot="{ row }">
            <div>{{ row.state=='create'?'已创建':row.state=='Success'?'已完成':row.state=='Failed'?'剪辑失败':'执行中' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime">
        </el-table-column>

        <el-table-column
          label="完成时间"
          prop="finishTime">
        </el-table-column>

        <el-table-column
          label="发布时间"
          prop="publishTime">
          <template  v-slot="{ row }">
            <div>{{ row.publishTime?row.publishTime:'暂无发布' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="{ row }">
            &lt;!&ndash;<el-link type="primary" :href="row.outUrl" :underline="false">预览</el-link>&ndash;&gt;
            <el-link type="primary" @click="open_url(row.outUrl)" :underline="false">预览</el-link>
            <el-link type="success" @click="copy_url(row.outUrl)">复制链接</el-link>
          </template>
        </el-table-column>
      </el-table>-->
      <!--分页按钮-->
      <!--<el-pagination
        background
        layout="prev, pager, next,jumper, ->, total"
        :total="listCount"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.limit"
        style="text-align: center">
      </el-pagination>-->
    </el-card>
  </div>
</template>

<script>
  import {projectjob, delProjectjob} from "@/api/creatCenter/piecemeal";
  export default {
    name: "index",
    data(){
      const defaultForm = {
        // page: 1, //当前页 刷新后默认显示第一页
        // limit: 10, //每一页显示的数据量 此处每页显示10条数据
        username: this.$store.state.user.info.username // 所属用户 *必需
      };
      return{
        isResetting:false,
        datetime:[],
        // 成片剪辑工程id
        id: '',
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        listCount:0,
        list:[],

        statusList: [{
          value: 'create',
          label: '已创建'
        }, {
          value: 'Success',
          label: '已完成'
        }, {
          value: 'Failed',
          label: '剪辑失败'
        }, {
          value: 'Processing',
          label: '执行中'
        }],
        // 当前编辑数据
        current: null,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'projectName',
            label: '剪辑名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'type',
            label: '剪辑模式',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'isPublish',
            label: '是否发布',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'isPublish'
          },
          {
            prop: 'state',
            label: '任务状态',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'state'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 200,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'finishTime',
            label: '完成时间 ',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'publishTime',
            label: '发布时间 ',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'publishTime'
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 280,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
      }
    },
    activated(){
      this.isResetting=false
      this.form= { ...this.defaultForm }
      this.datetime=''
      console.log("路由刷新======this.datetime=",this.datetime,'this.form',this.form)
      if(this.$route.query.title){
        // this.see()
        setTimeout(()=>{
          this.see()
        },300)
      }
      // this.init()
    },
    /* watch:{
       '$route'(val, from) {//监听到路由（参数）改变
         // 拿到目标参数 val.query.typeCode 去再次请求数据接口
         if(this.$route.query.id){
           // 成片剪辑工程id
           this.id = Number(this.$route.query.id)
           console.log('路由切换=====初始化this.id',this.id)
           this.init()
         }
       }
     },*/
    created(){
      /*if(this.$route.query.id){
        // 成片剪辑工程id
        this.id = Number(this.$route.query.id)
        console.log('created111111111this.id',this.id)
      }
      console.log("created=======")
      this.init()*/
    },
    /* setup() {
       // vue2
       watch: {
         $route(to, from){
               // 对路由变化作出响应...
           }
       }

     },*/
    mounted() {
      console.log("mounted=======")
      // this.init();
    },
    methods: {
      select(e){
        if(this.datetime){
          console.log("日期选择e============",e,'form.datetime',this.datetime)
          Object.assign( this.form, {
            startTime:  this.datetime[0] + ' 00:00:00',
            endTime:  this.datetime[1] + ' 23:59:59'
          })
        }
      },
      open_url(url){
        window.open(url)
      },
      copy_url(content){
        // window.clipboardData.setData('text', context);

        if (window.clipboardData) {
          /*
          window.clipboardData有三个方法:
        （1）clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"
        （2）getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"
        （3）setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
          */
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            //oncopy 事件在用户拷贝元素上的内容时触发。
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault(); //取消事件的默认动作
              document.oncopy = null;
            }
          })(content);
          //execCommand方法是执行一个对当前文档/当前选择/给出范围的命令。
          //'Copy':将当前选中区复制到剪贴板。
          document.execCommand('Copy');
        }
        this.$message.success('复制成功！');
      },
      see(){
        this.init()
      },
      //重置
      resetting(){
        this.isResetting=true
        this.form.projectName=''
        this.form.state=''
        this.form.isPublish=''
        this.datetime=''
        this.$forceUpdate();   // 刷新页面
        this.init()
      },
      init(){
        console.log("this.form.projectName",this.form.projectName)
        if(this.$route.query.title && this.isResetting == false){
          this.$set(this.form,'projectName',this.$route.query.title)
          this.form.sProjectId=Number(this.$route.query.id)
        }
        else{
          this.form.sProjectId=''
          delete this.form.sProjectId
        }
        console.log("进入调用分页this.form======",this.form)
        if (!this.form.projectName) {
          delete this.form.projectName
        }
        if (!this.form.state) {
          delete this.form.state
        }
        if (!this.form.isPublish) {
          delete this.form.isPublish
        }
        if(!this.datetime){
          delete this.form.startTime
          delete this.form.endTime
        }

        this.reload()
      },
      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource({ page, limit, where, order }) {
        const result = await projectjob({ ...where, ...order, page, limit,
          ...this.form,
          username: this.$store.state.user.info.username // 所属用户 *必需
        });
        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },

      /* 刷新————表格数据源 */
      /*datasource({ page, limit, where, order }) {
        return projectjob({ ...where, ...order, page, limit,
          username: this.$store.state.user.info.username // 所属用户 *必需
        });
      },*/
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 多选删除
      delMoreGroup(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delGroups(ids)
      },

      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该成片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delProjectjob({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },

      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        this.form.page = currentPage; //每次点击分页按钮，当前页发生变化
        this.init()
        console.log('this.form.page)', this.form.page);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
    },
  }
</script>

<style scoped>
  /*<!-- 分页样式 -->*/
  /deep/ .el-table + .el-pagination {
    margin: 15px;
  }
</style>
